import React from 'react';
import { connect } from 'umi';
import { Button, Layout, Table, Input } from 'antd'

import CreateUser from '../../component/CreateUser'

import './index.css';

import 'antd/dist/antd.css'
import { supportsGoWithoutReloadUsingHash } from 'history-with-query/DOMUtils';

const { Header, Content } = Layout

class Index extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isShow: false,
      editMap: {
        // [id] : { ..., isEdit: true / false }
      }
    }
  }

  componentDidMount() {
    this.query()
  }

  query = () => {
    const { dispatch } = this.props
    dispatch({
      type: 'user/get'
    })
  }


  del = (data) => {
    const { dispatch } = this.props
    dispatch({
      type: 'user/del',
      payload: data
    })
  }


  editFn = (rowData) => {
    const { editMap } = this.state
    const { id } = rowData
    let obj = editMap[id]
    if (obj !== undefined) {
      obj.isEdit = !obj.isEdit
      // editMap[id].isEdit = !editMap[id].isEdit
    } else {
      obj = {
        ...rowData,
        isEdit: true
      }
    }
    this.setState({
      editMap: {
        ...editMap,
        [id]: obj
      }
    })
  }

  changeName = (e, id) => {
    const { editMap } = this.state
    let obj = {
      ...editMap[id]
    }
    obj['name'] = e.currentTarget.value
    this.setState({
      editMap: {
        ...editMap,
        [id]: obj
      }
    })
  }

  hideModal = () => {
    this.setState({
      isShow: false
    })
  }

  save = (id) => {
    const { editMap } = this.state
    const { dispatch } = this.props
    
    // 要修改的对象
    dispatch({
      type: 'user/update',
      payload: editMap[id]
    })
    
    this.setState({
      editMap: {
        ...editMap,
        [id]: undefined
      }
    })
  }


  edit = (str, rowData) => {
    const { editMap } = this.state
    const { id } = rowData
    let eml = (
      <Button 
        type='primary' 
        onClick={() => this.editFn(rowData)} 
      >
        编辑
      </Button>
    )
    if (editMap[id] && editMap[id].isEdit) {
      eml = <Button type='primary' onClick={() => this.save(id)} >保存</Button>
    }
    return (
      <div>
        {eml}|
        <Button type='ghost' onClick={() => this.del(rowData)} >删除</Button>
      </div>
    )
  }


  renderName = (str, rowData) => {
    
    const { editMap } = this.state
    const { id } = rowData

    let eml = str
    if (editMap[id] && editMap[id].isEdit) {
      eml = (
        <Input 
          style={{ width: 100 }}
          value={editMap[id]['name']}
          onChange={(e) => this.changeName(e, id)}
        />  
      )
    }
    return (
      <div>
        {eml}
      </div>
    )
  }

  render() {

    // name(pin):"222222"
    // department(pin):"产品部"
    // hiredate(pin):"2017-07-01"
    // level(pin):"4级"

    const { user } = this.props

    let columns = [
      { title: '姓名', dataIndex: 'name', render: this.renderName },
      { title: '部门', dataIndex: 'department', key: 'department', },
      { title: '入职时间', dataIndex: 'hiredate', key: 'hiredate', },
      { title: '职级', dataIndex: 'level', key: 'level', },
      { title: '设置', render: this.edit }
    ]
    return (
      <Layout theme='light' >
        <CreateUser 
          isShow={this.state.isShow}
          hideModal={this.hideModal}
        />
        <Header>
          Index
        </Header>
        <Content>
          <Button 
            type='primary'
            onClick={() => this.setState({ isShow: !this.state.isShow })} 
          >
            新增员工
          </Button>
          <Table 
            loading={user.loading}
            className="table"
            dataSource={user.data}
            columns={columns}
          />
        </Content>
      </Layout>
    )
  }
}

const mapState = state => ({
  user: state.user
})

export default connect(mapState)(Index)
